---
title: Highlight
description: "`Highlight`は、テキスト内の指定された文字列をハイライトするコンポーネントです。デフォルトでは、`p`要素をレンダリングします。"
storybook: components-highlight--basic
source: components/highlight
---

```tsx preview
<Highlight query="わかんない" colorScheme="warning">
  わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！
  ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
  わかんない！私にはわかんないの！
  ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
  狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
</Highlight>
```

## 使い方

:::code-group

```tsx [package]
import { Highlight } from "@yamada-ui/react"
```

```tsx [alias]
import { Highlight } from "@/components/ui"
```

```tsx [monorepo]
import { Highlight } from "@workspaces/ui"
```

:::

```tsx
<Highlight />
```

### バリアントを変更する

```tsx preview
<VStack>
  <For each={["subtle", "solid", "text", "accent"]}>
    {(variant, index) => (
      <Highlight
        key={index}
        query="わかんない"
        colorScheme="warning"
        markProps={{ variant }}
      >
        わかんないよ…。わっかんないよ！
        ジュー君の言ってることはひとつもわかんないよ！
        ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
        わかんない！私にはわかんないの！
        ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
        狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
      </Highlight>
    )}
  </For>
</VStack>
```

### カラースキームを変更する

```tsx preview
<VStack>
  <For each={["warning", "success"]}>
    {(colorScheme, index) => (
      <Highlight key={index} query="わかんない" colorScheme={colorScheme}>
        わかんないよ…。わっかんないよ！
        ジュー君の言ってることはひとつもわかんないよ！
        ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
        わかんない！私にはわかんないの！
        ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
        狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
      </Highlight>
    )}
  </For>
</VStack>
```

### 複数指定する

```tsx preview
<Highlight query={["わかんない", "ジュー君"]} colorScheme="warning">
  わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！
  ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
  わかんない！私にはわかんないの！
  ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
  狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
</Highlight>
```

### ハイライトをスタイリングする

```tsx preview
<Highlight
  query="わかんない"
  colorScheme="warning"
  markProps={{ rounded: "full" }}
>
  わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！
  ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
  わかんない！私にはわかんないの！
  ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
  狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
</Highlight>
```

### フラグメントを使う

デフォルトでは、`Highlight`は`p`要素をレンダリングします。`fragment`を設定することで、`highlight`は[フラグメント](https://react.dev/reference/react/Fragment)を使用します。

```tsx preview
<Text>
  <Highlight fragment query="わかんない" colorScheme="warning">
    わかんないよ…。わっかんないよ！
    ジュー君の言ってることはひとつもわかんないよ！
    ジュー君がいいって言ってるもの、何がいいのかわかんないよ！
    わかんない！私にはわかんないの！
    ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！
    狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！
  </Highlight>
</Text>
```

### レンダリングされる要素をカスタマイズする

レンダリングされる要素をカスタマイズする場合は、`useHighlight`を使用します。

```tsx preview functional client
const chunks = useHighlight({
  query: ["わかんない", "ジュー君"],
  text: " わかんないよ…。わっかんないよ！ ジュー君の言ってることはひとつもわかんないよ！ ジュー君がいいって言ってるもの、何がいいのかわかんないよ！ わかんない！私にはわかんないの！ ブラッディって何がカッコイイの？血なんて嫌だよ！痛いだけだよ！ 狂うのどこがカッコイイの？クレイジーのどこがいいのかわかんない！",
})

return (
  <Text>
    {chunks.map(({ match, text }, index) =>
      match ? (
        text === "わかんない" ? (
          <Mark key={index} colorScheme="warning">
            {text}
          </Mark>
        ) : (
          <Mark key={index} colorScheme="success">
            {text}
          </Mark>
        )
      ) : (
        text
      ),
    )}
  </Text>
)
```

## Props

<PropsTable name="highlight" />
